<!-- 变量声明用美元符号 -->
$demo-color:pink;

.nav{
<!-- 变量调用 -->
broder:$demo-color

}

<!-- & -->
div a{
<!-- &后面的内容与父元素直接进行拼接，适用于伪类 -->
&:hover{
transform:
}
}

div a:hover{
transform:
}

<!-- 父元素与子元素一一配对 -->
<!-- 数量：子大于父 -->
#content{
h1,h2,h3,h4{border:solid}
}
<!-- 数量：父大于子 -->
#content h1,
#content h2,
#content h3,
#content h4{
border:solid
}


<!-- 选择器 -->
#div{
<!-- #div>h1  #div+p    -->
>h1{}
+p{}
<!-- #div th>dt    #div th>dd  -->
th>{
dt{ }
dd{ }
}
}

<!-- 属性重复 -->
#div{
<!-- border-style:  ;  border-width:  ;-->
<!-- 注意是border: -->
border:{
style:
width:
}
}

<!-- import -->
<!-- 为编译的最高优先级 -->
<!-- 导入局部内容中的div -->
@import "./part/div"

<!-- !default -->
<!-- 读取的优先级赋值大于默认值200px -->
$dedfault-test:200px !default;
#div{
width:$dedfault-test
}

<!-- 混合与插入 -->
<!-- @mixin 选择器与@include 选择器 -->
<!-- @include 选择器与类和% -->
